<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="./assets/lib/iview/styles/iview.css" />
    <link rel="stylesheet" type="text/css" href="./assets/css/default.css" />
    <script src="./assets/lib/vue/vue-2.5.17.min.js"></script>
    <script src="./assets/lib/iview/iview.min.js"></script>
    <script src="./assets/lib/axios/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="main">
            <div class="layout">
                <Layout>
                    <!-- 左侧菜单 -->
                    <Sider ref="leftMenuSider" hide-trigger collapsible :width="256" :collapsed-width="64" class="left-sider"
                        :style="{overflow: 'hidden', height: menuHeight+'px'}" v-model="isCollapsed">
                        <div class="logo-con">
                            <img v-show="!isCollapsed" src="./assets/images/logo.jpg" key="max-logo" />
                            <img v-show="isCollapsed" src="./assets/images/logo-min.jpg" key="min-logo" />
                        </div>
                        <div class="side-menu-wrapper">
                            <i-menu id="sider_menu" v-show="!isCollapsed" ref="myMenu" :active-name="currentTab.menuId" theme="dark" width="auto"
                                :open-names="siderOpenNames" accordion>
                                <template v-for="menu in menuList" :key="menu.menuId">
                                    <template v-if="menu.children && menu.children.length > 0">
                                        <submenu :name="menu.menuId">
                                            <template slot="title">
                                                <Icon :type="menu.icon"></Icon>
                                                <span :title="menu.title">{{menu.title}}</span>
                                            </template>
                                            <template v-for="item in menu.children">
                                                <menu-item :name="item.menuId" @click.native="openMenuPage(item)">
                                                    <Icon :type="item.icon"></Icon>
                                                    <span :title="item.title">{{item.title}}</span>
                                                </menu-item>
                                            </template>
                                        </submenu>
                                    </template>
                                    <template v-else>
                                        <menu-item :name="menu.menuId" @click.native="openMenuPage(menu)">
                                            <Icon :type="menu.icon"></Icon>
                                            <span :title="menu.title">{{menu.title}}</span>
                                        </menu-item>
                                    </template>
                                </template>
                            </i-menu>
                            <div class="menu-collapsed" v-show="isCollapsed" :list="menuList">
                                <template v-for="menu in menuList">
                                    <template v-if="menu.children && menu.children.length > 1">
                                        <Dropdown class="collased-menu-dropdown'" transfer :placement="menuPlaceMent">
                                            <a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, menu.children)" style="text-align: center">
                                                <Icon :type="menu.icon" :size="20" style="color:white"></Icon>
                                            </a>
                                            <dropdown-menu slot="list">
                                                <dropdown-item  @click.native="openMenuPage(menu)" v-for="item in menu.children" :key="item.menuId"  :name="item.menuId">
                                                    <Icon :type="item.icon" :size="16"></Icon>
                                                    <span class="menu-title">{{item.title}}</span>
                                                </dropdown-item>
                                            </dropdown-menu>
                                        </Dropdown>
                                    </template>
                                    <Tooltip transfer v-else :content="menu.title" placement="right" :key="menu.menuId">
                                        <a @click="openMenuPage(menu)" class="drop-menu-a" :style="{textAlign: 'center'}">
                                            <Icon :type="menu.icon" :size="20" style="color:white"></Icon>
                                        </a>
                                    </Tooltip>
                                </template>
                            </div>
                        </div>
                    </Sider>
                    <Layout>
                        <!-- 右侧头部 -->
                        <i-header class="header-con">
                            <div class="header-bar">
                                <!-- 左侧菜单压缩按钮 -->
                                <a @click="collapsedSider" type="text" :class="['sider-trigger-a', isCollapsed ? 'collapsed' : '']">
                                    <Icon type="md-menu" :size="26" />
                                </a>
                                <!-- 面包屑导航 -->
                                <div class="custom-bread-crumb">
                                    <Breadcrumb :style="{fontSize: '14px'}">
                                        <breadcrumb-item v-for="item in breadCrumbList" to="#" @click.native="openMenuPage(item)" :key="item.menuId">
                                            <Icon :type="item.icon" style="margin-right: 4px;"> </Icon> {{item.title}}
                                        </breadcrumb-item>
                                    </Breadcrumb>
                                </div>
                                <div class="custom-content-con">
                                    <div class="user-avatar-dropdown">
                                        <Dropdown @on-click="handleUserDropClick">
                                            <Badge :dot="!!messageUnreadCount">
                                                <Avatar :src="userAvatar"/>
                                            </Badge>
                                            <Icon :size="18" type="md-arrow-dropdown"></Icon>
                                            <dropdown-menu slot="list">
                                                <dropdown-item name="message">
                                                    消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
                                                </dropdown-item>
                                                <dropdown-item name="logout">退出登录</dropdown-item>
                                            </dropdown-menu>
                                        </Dropdown>
                                    </div>
                                </div>
                            </div>
                        </i-header>
                        <i-content class="main-content-con">
                            <Layout class="main-layout-con">
                                <div class="tag-nav-wrapper">
                                    <div class="tags-nav" ref="tagNav">
                                        <!-- 右侧下拉关闭菜单 -->
                                        <div class="close-con">
                                            <Dropdown transfer @on-click="handleCloseDropdownClick" @on-visible-change="handleCloseDropdownVisiable" style="margin-top:7px;">
                                                <i-button size="small" type="text">
                                                    <Icon :size="18" type="ios-close-circle-outline" />
                                                </i-button>
                                                <dropdown-menu slot="list">
                                                    <dropdown-item name="close-all">
                                                        <Icon type="md-close"></Icon> 关闭全部
                                                    </dropdown-item>
                                                    <dropdown-item name="close-current" v-if="currentTab.closable">
                                                        <Icon type="ios-arrow-forward"></Icon> 关闭当前
                                                    </dropdown-item>
                                                    <dropdown-item name="close-others">
                                                        <Icon type="md-arrow-forward"></Icon> 关闭其他
                                                    </dropdown-item>
                                                </dropdown-menu>
                                            </Dropdown>
                                        </div>
                                        <!-- 标签上右键菜单 -->
                                        <ul v-show="tagRightMenuVisible"
                                            :style="{left: contextMenuLeft + 'px', top: contextMenuTop + 'px'}"
                                            class="contextmenu">
                                            <li @click.native="doCloseTabAll">关闭全部</li>
                                            <li @click.native="doCloseTabCurrent" v-if="showCloseCurrent">关闭当前</li>
                                            <li @click.native="doCloseTabOthers">关闭其他</li>
                                        </ul>
                                        <div class="btn-con left-btn">
                                            <i-button type="text" @click="tabhandleScroll(240)">
                                                <Icon :size="18" type="ios-arrow-back" />
                                            </i-button>
                                        </div>
                                        <div class="btn-con right-btn">
                                            <i-button type="text" @click="tabhandleScroll(-240)">
                                                <Icon :size="18" type="ios-arrow-forward" />
                                            </i-button>
                                        </div>
                                        <div class="scroll-outer" ref="scrollOuter" @DOMMouseScroll="tabHandleMouseScroll"
                                            @mousewheel="tabHandleMouseScroll">
                                            <div ref="scrollBody" class="scroll-body"
                                                :style="{left: tagBodyLeft + 'px'}">
                                                <transition-group name="taglist-moving-animation">
                                                    <Tag type="dot" v-for="(item, index) in tabNavList"
                                                        ref="tagsPageOpened" :key="`tag-nav-${index}`"
                                                        :name="item.menuId" :data-route-item="item"
                                                        @on-close="handleTabRemoved(item)"
                                                        @click.native="handleTabClicked(item)"
                                                        :closable="item.closable"
                                                        :color="index === currentTab.index ? 'primary' : 'default'"
                                                        @contextmenu.prevent.native="contextMenu(item, $event)">
                                                        {{ item.title }}</Tag>
                                                </transition-group>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-for="(tab, index) in tabNavList" :key="tab" >
                                    <iframe :src="tab.href" style="border:none;width:100%;" v-if="index == currentTab.index"
                                        frameborder="0" :height="frameHeight" marginheight="0" scrolling="auto" marginwidth="0"></iframe>
                                </div>
                            </Layout>
                        </i-content>
                    </Layout>
                </Layout>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //检查是否已登录
        // var token = localStorage.getItem("dnc_token");
        // if (!token) {
        //     window.location.href = "login.html";
        // }
        Vue.prototype.$Message.config({
            top: 10,
            duration: 3
        });
        var vm = new Vue({
            el: '#app',
            data: {
                // 高度计算
                windowHeight: 0,
                frameHeight: 0,
                menuHeight: 300,
                siderOpenNames: [],
                // 面包屑数据
                breadCrumbList: [],
                // 已打开页面菜单
                tabNavList: [],
                currentTab: {
                    index: 0,
                    menuId: "",
                    closable: false
                },
                // 左侧菜单压缩
                isCollapsed: false,
                menuPlaceMent: 'right-end',
                // 标签上右键菜单
                tagRightMenuVisible: false,
                contextMenuLeft: 0,
                contextMenuTop: 0,
                showCloseCurrent: true,
                // 标签栏定位
                tagBodyLeft: 0,
                outerPadding: 4,
                // 用户数据
                userAvatar: '',
                messageUnreadCount: 2,
                // 菜单数据
                menuList: [
                    { 
                        title: "首页", menuId: "1-0", href: "./pages/default.html", icon: "md-home", closable: false
                    },
                    {
                        title: "用户及授权", menuId: "1", icon: "ios-chatbubbles", children: [
                            { title: "用户管理", menuId: "1-1", href: "pages/default.html", icon: "logo-apple", parentId: "1" },
                            { title: "资源管理", menuId: "1-2", href: "pages/default.html", icon: "logo-windows", parentId: "1"},
                            { title: "角色管理", menuId: "1-3", href: "pages/default.html", icon: "logo-tux", parentId: "1"}
                        ]
                    },
                    {
                        title: "测试菜单", menuId: "4", icon: "logo-apple", href: "./pages/default.html"
                    },
                    {
                        title: "系统管理", menuId: "2", icon: "logo-windows", children: [
                            { title: "树状下拉选择器", menuId: "2-1", href: "pages/default.html", icon: "logo-apple", parentId: "2"},
                            { title: "组织机构", menuId: "2-2", href: "pages/default.html", icon: "logo-windows", parentId: "2"},
                            { title: "角色管理", menuId: "2-3", href: "pages/default.html", icon: "logo-apple", parentId: "2"},
                            { title: "基础设置", menuId: "2-4", href: "pages/default.html", icon: "logo-windows", parentId: "2"},
                            { title: "指标类别", menuId: "2-5", href: "pages/default.html", icon: "logo-apple", parentId: "2"},
                            { title: "用户管理", menuId: "2-6", href: "pages/default.html", icon: "logo-windows", parentId: "2"},
                            { title: "模块管理", menuId: "2-7", href: "pages/default.html", icon: "logo-apple", parentId: "2"},
                            { title: "人员导入", menuId: "2-8", href: "pages/default.html", icon: "logo-windows", parentId: "2"},
                            { title: "流程申请", menuId: "2-9", href: "pages/default.html", icon: "logo-apple", parentId: "2"},
                            { title: "流程监管", menuId: "2-10", href: "pages/default.html", icon: "logo-windows", parentId: "2"},
                            { title: "发布消息", menuId: "2-11", href: "pages/default.html", icon: "logo-apple", parentId: "2"},
                            { title: "系统环境", menuId: "2-14", href: "pages/default.html", icon: "logo-windows", parentId: "2"}
                        ]
                    },
                    {
                        title: "组件", menuId: "3", icon: "logo-tux", children: [
                            { title: "树状表格", menuId: "3-1", href: "pages/components/treetable.html", icon: "logo-apple", parentId: "3"},
                            { title: "组织结构树", menuId: "3-2", href: "pages/components/orgtree.html", icon: "logo-windows", parentId: "3" }
                        ]
                    }
                ]
            },
            watch: {
                tagRightMenuVisible (value) {
                    if (value) {
                        document.body.addEventListener('click', this.closeTagRightMenu)
                    } else {
                        document.body.removeEventListener('click', this.closeTagRightMenu)
                    }
                }
            },
            beforeDestroy: function () {
                window.removeEventListener('resize', this.handleResize)
            },
            mounted() {
                // 初始化
                this.init()
                // 窗口改变事件
                window.addEventListener('resize', this.handleResize);
                // 默认打开首页
                this.openMenuPage(this.menuList[0]);
            },
            methods: {
                init: function () {
                    this.calcFrameHeight();
                    this.calcSiderMenuHeight();
                },
                calcFrameHeight: function () {
                    this.windowHeight = (document.documentElement.scrollHeight || document.body.scrollHeight);
                    this.frameHeight = this.windowHeight - 95;
                },
                calcSiderMenuHeight: function () {
                    this.menuHeight = this.windowHeight > this.$refs.myMenu.$el.scrollHeight
                        ? this.windowHeight : this.$refs.myMenu.$el.scrollHeight
                },
                openMenuPage(menu) {
                    if(menu.href){
                        var tab = { title: menu.title, href: menu.href, icon: menu.icon, menuId: menu.menuId,
                            closable: typeof(menu.closable) == "undefined" ? true : menu.closable, parentId: menu.parentId };
                        if (this.tabNavList.map(x => x.menuId).indexOf(menu.menuId) === -1) {
                            this.tabNavList.push(tab);
                        }
                        this.setCurrentTab(tab.menuId);
                    }
                },
                setCurrentTab: function (menuId) {
                    var tab = this.getTab(menuId);
                    var tabIndex = this.getTabIndex(menuId);
                    if (tab) {
                        this.currentTab.index = tabIndex;
                        this.currentTab.menuId = tab.menuId;
                        this.currentTab.closable = tab.closable;
                    }
                    this.$nextTick(() => {
                        this.moveToView(this.$refs.tagsPageOpened[this.currentTab.index].$el)
                    })
                    // 设置面包屑
                    this.resetBreadcrumb()
                },
                resetBreadcrumb() {
                    // 首页
                    this.breadCrumbList = [this.menuList[0]]
                    // 当前页非首页
                    var tab = this.tabNavList[this.currentTab.index];
                    if (tab.menuId != this.menuList[0].menuId) {
                        // 设置父路径
                        if (tab.parentId){
                            var index = this.menuList.map(x => x.menuId).indexOf(tab.parentId)
                            this.breadCrumbList.push(this.menuList[index])
                        }
                        this.breadCrumbList.push(tab)
                    }
                },
                // 展示标签栏的右键菜单
                contextMenu (item, e) {
                    this.tagRightMenuVisible = true
                    const offsetLeft = this.$refs.tagNav.getBoundingClientRect().left
                    this.contextMenuLeft = e.clientX - offsetLeft + 10
                    this.contextMenuTop = e.clientY - 64
                    var clickIndex = this.$refs.tagsPageOpened.map(x => x.$el).indexOf(e.currentTarget)
                    this.showCloseCurrent = this.tabNavList[clickIndex].closable
                },
                // 左侧菜单压缩后弹出菜单计算
                handleMousemove (event, children) {
                    const { pageY } = event
                    const height = children.length * 38
                    const isOverflow = pageY + height < window.innerHeight
                    this.menuPlaceMent = isOverflow ? 'right-start' : 'right-end'
                },
                // 控制左侧菜单压缩
                collapsedSider() {
                    this.$refs.leftMenuSider.toggleCollapse();
                },
                // 标签栏滚动
                tabhandleScroll(offset) {
                    const outerWidth = this.$refs.scrollOuter.offsetWidth
                    const bodyWidth = this.$refs.scrollBody.offsetWidth
                    if (offset > 0) {
                        this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)
                    } else {
                        if (outerWidth < bodyWidth) {
                            if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
                                this.tagBodyLeft = this.tagBodyLeft
                            } else {
                                this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth)
                            }
                        } else {
                            this.tagBodyLeft = 0
                        }
                    }
                },
                tabHandleMouseScroll (e) {
                    var type = e.type
                    let delta = 0
                    if (type === 'DOMMouseScroll' || type === 'mousewheel') {
                        delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40
                    }
                    this.tabhandleScroll(delta)
                },
                moveToView (tag) {
                    const outerWidth = this.$refs.scrollOuter.offsetWidth
                    const bodyWidth = this.$refs.scrollBody.offsetWidth
                    if (bodyWidth < outerWidth) {
                        this.tagBodyLeft = 0
                    } else if (tag.offsetLeft < -this.tagBodyLeft) {
                        // 标签在可视区域左侧
                        this.tagBodyLeft = -tag.offsetLeft + this.outerPadding
                    } else if (tag.offsetLeft > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + outerWidth) {
                        // 标签在可视区域
                        this.tagBodyLeft = Math.min(0, outerWidth - tag.offsetWidth - tag.offsetLeft - this.outerPadding)
                    } else {
                        // 标签在可视区域右侧
                        this.tagBodyLeft = -(tag.offsetLeft - (outerWidth - this.outerPadding - tag.offsetWidth))
                    }
                },
                // 遍历查找某个标签
                getTab: function (menuId) {
                    for (var i = 0; i < this.tabNavList.length; i++) {
                        if (this.tabNavList[i].menuId == menuId) {
                            return this.tabNavList[i];
                        }
                    }
                    return null;
                },
                getTabIndex: function (menuId) {
                    for (var i = 0; i < this.tabNavList.length; i++) {
                        if (this.tabNavList[i].menuId == menuId) {
                            return i;
                        }
                    }
                    return -1;
                },
                closeTagRightMenu() {
                    this.tagRightMenuVisible = false
                },
                handleTabClicked: function (menu) {
                    this.setCurrentTab(menu.menuId);
                    this.siderOpenNames = [menu.parentId];
                    // 重新渲染右侧标签
                    this.$nextTick(function () {
                        this.$refs["myMenu"].updateOpened();
                    });
                },
                handleTabRemoved: function (menu) {
                    var index = this.getTabIndex(menu.menuId)
                    this.doRemoveTab(index)
                    if (this.currentTab.menu === index) {
                        this.setCurrentTab(this.tabNavList[index - 1].menuId)
                    } else if (this.currentTab.index > index){
                        this.currentTab.index --
                    }
                },
                doRemoveTab: function (index) {
                    var tab = this.tabNavList[index]
                    if (!tab.closable) {
                        return;
                    }
                    this.tabNavList.splice(index, 1);
                },
                handleCloseDropdownClick: function (name) {
                    switch (name) {
                        case "close-all":
                            this.doCloseTabAll();
                            break;
                        case "close-current":
                            this.doCloseTabCurrent();
                            break;
                        case "close-others":
                            this.doCloseTabOthers();
                            break;
                    }
                },
                handleCloseDropdownVisiable: function () {
                    this.showCloseCurrent = this.currentTab.closable
                },
                handleUserDropClick(name) {
                    switch (name) {
                        case "message":
                            break;
                        case "logout":
                            this.doLogout()
                            break;
                    }
                },
                doLogout() {
                    // TODO: 注销token
                    window.location.href = "login.html";
                },
                doCloseTabAll() {
                    for (var i = this.tabNavList.length - 1; i >= 0; i--) {
                        this.doRemoveTab(i)
                    }
                    this.setCurrentTab(this.tabNavList[this.tabNavList.length - 1].menuId)
                },
                doCloseTabCurrent() {
                    this.doRemoveTab(this.currentTab.index)
                    this.setCurrentTab(this.tabNavList[this.currentTab.index - 1].menuId)
                },
                doCloseTabOthers() {
                    for (var i = this.tabNavList.length - 1; i >= 0; i--) {
                        if(i != this.currentTab.index){
                            this.doRemoveTab(i)
                        }
                    }
                    this.setCurrentTab(this.tabNavList[this.tabNavList.length - 1].menuId)
                },
                handleResize() {
                    this.calcFrameHeight();
                    this.calcSiderMenuHeight();
                }
            }
        });
    </script>
</body>
</html>